<template>
  <div class="hello">{{person}}</div>
  <el-button @click="goChinaMap">chinaMap</el-button>
</template>

<script>
import { reactive, onMounted, onUpdated, onUnmounted } from "vue";
import { useRouter } from "vue-router";
// 导入 useStore 函数
import { useStore } from 'vuex'
export default {
  setup() {
    const router = useRouter()
    const store = useStore()
    store.commit('setPerson', {
      name: 'meikai',
      sex: 'man',
      age: 28
    })
    const person = store.getters.getPerson
    const state = reactive({
      name: '1213123'
    });
    onMounted(() => {
      console.log("onMounted!");
    });
    onUpdated(() => {
      console.log("updated!");
    });
    onUnmounted(() => {
      console.log("unmounted!");
    });
    const goChinaMap = function(){
      router.push('/chinaMap')
    }
    return {
      goChinaMap,
      state,
      person
    };
  }
};
// export default {
//   name: 'HelloWorld',
//   props: {
//     msg: String
//   }
// }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
